<template>
  <div class="demo">
    <MneuList :list="state.list" />
    <MenuContent :list="state.list" />
  </div>
</template>

<script setup>
import { reactive } from "vue";
import MneuList from "./MneuList.vue";
import MenuContent from "./MenuContent.vue";

components: {
  MneuList;
  MenuContent;
}

const state = reactive({
  list: [
    {
      id: 0,
      content: "html",
      href: "#html",
    },
    {
      id: 1,
      content: "css",
      href: "#css",
    },
    {
      id: 2,
      content: "js",
      href: "#js",
    },
    {
      id: 3,
      content: "jq",
      href: "#jq",
    },

    {
      id: 4,
      content: "vue",
      href: "#vue",
    },
  ],
});
</script>

<style lang="scss" scoped>
.demo {
  display: flex;
}
</style>
